<template>
  <div class="container">
    <drawTitle :luckDrawData="luckDrawData"></drawTitle>
    <div class="luckClick">
      <div class="meTitle">
        <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>抽奖情况
      </div>
      <div class="help_people" v-if="key =='' ? false : true">
        <img :src="toPhotoUrl ==''? '' :toPhotoUrl" mode="aspectFill"/>
        <div class="help_details">
          <div>@ {{toNickname ==''? '' :toNickname}}</div>
          <div>我正在参与抽奖活动，助我一臂之力！</div>
        </div>
        <img :src="setSupport? 'http://file.rzkeji.com/web/loveciy/img/luckDraw/help1.png' :'http://file.rzkeji.com/web/loveciy/img/luckDraw/help2.png'" @click="support"/>
      </div>
      <winningSituation :luckDrawData="luckDrawData" v-if="luckDrawData.status_type=='end'"></winningSituation>
      <ul class="clickList">
        <li v-for="(imgSrc,index) in joinImgList" :key="index">
          <img :src="imgSrc" mode="aspectFill"/>
        </li>
      </ul>
      <div class="clickDetails">已有{{luckDrawData.join_num}}人参与抽奖,<span class="fontGreen" @click="lookMore">查看全部 ></span></div>
    </div>
    <help :luckDrawData="luckDrawData"></help>
    <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"/>
    <commitMemory v-if="commitBtn"></commitMemory>

  </div>
</template>
<script>
import drawTitle from '@/pages/components/drawTitle/index.vue'
import commitMemory from '@/pages/components/commitMemory/index.vue'
import help from '@/pages/components/help/index.vue'
import winningSituation from '@/pages/components/winningSituation/index.vue'
export default {
  components: {
    drawTitle,
    commitMemory,
    help,
    // winningSituation
  },
  data () {
    return {
      listId:1,
      luckDrawData:[],
      userToken:'',
      key:'',
      setSupport:true,
      toNickname:"",
      toPhotoUrl:""
    }
  },
  computed:{
    commitBtn:{
      get: function () {
        return this.$store.state.modulesLuck.commitBtn
      },
      set: function (newValue) {
        this.$store.dispatch('setCommitBtn',newValue)
      }
    },
    joinImgList(){
      if(this.luckDrawData.join_img_list!=undefined){
        return this.luckDrawData.join_img_list.slice(0,10)   //最多显示10个人的头像
      }
    },
  },
  mounted(){
    this.userToken=wx.getStorageSync('userToken')
    this.getLuckDrawData();
  },
  onShow(){
      console.log("support==>"+this.setSupport);
  },
  onLoad(option){
    console.log(option.key)
    this.listId=option.id;
    this.key=option.key!=undefined ? option.key : ""
    this.$store.dispatch('setListId',this.listId)  
    this.$store.dispatch('setKey',this.key) 
  },
  methods:{

    async getLuckDrawData(){
     let res=await this.$api.getActivityDrawDetail({id:this.listId,user_token:this.userToken,key:this.key})
	  if(res.data.level=='success'){
        this.luckDrawData=res.data.data;
        let luckTip=this.luckDrawData.join_info==null ? false : true;   //这里是判断点击提高中奖率时是否有提示
        this.$store.dispatch('setLuckTip',luckTip);
        this.$store.dispatch('setLuckData',this.luckDrawData);
        if(res.data.data.to_support_userinfo != null){
            this.toNickname = res.data.data.to_support_userinfo.nickname;
            this.toPhotoUrl = res.data.data.to_support_userinfo.photo_url;
            if(res.data.data.to_support_userinfo.has_support == 1){
                this.setSupport = false;
                console.log("aaa"+this.setSupport);
            }else{
                this.setSupport = true;
                console.log("aaa"+this.setSupport);
            }
        }
      }
    },
    lookMore(){
		
      wx.navigateTo({
        url:`/pages/drawList/imagesDetails/imagesDetails?id=${this.listId}&type=luckDraw`
      })
    },
    async support(){
      let res=await this.$api.setSupport({user_token:this.userToken,key:this.key})
	  if(res.data.level == "success"){
          this.setSupport=false;
          this.getLuckDrawData();
      }
      this.$currency.showToast(res.data.message,'none',2500)
    }
  },
    onShareAppMessage: function (res) {   //分享
        this.$currency.share(res,'班服定制/抽奖活动','/pages/drawList/luckDraw/luckDraw?id='+this.listId)
    }
}
</script>

<style scoped>
.container{width: 100%;overflow: hidden;padding-bottom:55px;}
.clickList{width:91.9%;display: flex;justify-content: row;margin: 20px 0 10px 4%;overflow: hidden;}
.clickList li{margin-left: 5px;}
.clickList li img{width: 30px;height: 30px;}
/*.luckClick{width: 351px;margin-left: 12px;margin-top: 50px;}*/
.clickImg{width:101px;height: 101px;margin:50px auto;display: block;}
.clickDetails{width: 190.5px;height: 11.5px;line-height: 11.5px;margin:20px auto 50px;font-size: 14px;}
.fontGreen{color: #09A110;}
.footer{width: 100%;display: block;height: 36px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 179px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.meTitle{width: 96%;height: 24px;padding-left: 4%;font-size: 14px;line-height: 24px;margin-bottom: 15px;margin-top: 25px;}
.meTitle img{width: 24px;height: 24px;margin-right: 5px;vertical-align: middle;}
.help_people{width: 321px;height:95px;display: flex;justify-content: row;border: 0.2px solid #CCCCCC;padding: 0 15px;margin-left: 12px;}
.help_people img:nth-of-type(1){width: 40px;height: 40px;margin-top: 27.5px;}
.help_people img:nth-of-type(2){width: 60px;height: 60px;margin-top: 17.5px;}
.help_people>div{width: 225px;height: 40px;margin-top: 27.5px;margin-left: 5px;}
.help_people>div div:nth-of-type(1){width: 100%;height: 25px;line-height: 25px;font-size: 14px;color: #1E1E1E}
.help_people>div div:nth-of-type(2){width: 100%;height: 15px;line-height: 15px;font-size: 12px;color: #999999;}
</style>
